<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染-购物车</title>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.getElementById('root'))

    class App extends React.Component {
        constructor(props) {
            super();
            this.state = {
                list: [
                    {id: 5, name: '《算法导论》', day: '1999-10', price: 88, count: 2, visible: true},
                    {id: 6, name: '《UNIX编程艺术》', day: '2000-01', price: 66, count: 2, visible: true},
                    {id: 8, name: '《编程珠玑》', day: '2011-05', price: 188, count: 2, visible: true},
                    {id: 66, name: '《React入门》', day: '2005-11', price: 68, count: 2, visible: true},
                ],
                listDef: [
                    {key: 'name', text: '书籍名称'},
                    {key: 'day', text: '出版日期'},
                    {key: 'price', text: '价格'},
                    {key: 'count', text: '购买数量'}
                ]
            }
        }

        removeBook = function (index) {
            this.setState({
                list: this.state.list.filter((t, i) => i !== index)
            })
        };
        addCount = (index, number) => {
            let {list} = this.state
            list = [...list]
            let remove = false
            list.filter((t, i) => i === index).forEach(t => {
                const res = t.count + number
                res === 0 ? remove = true : t.count = res
            })
            remove ? this.removeBook(index) :
            this.setState({
                list: list
            })
        }
        render() {
            const { list, listDef } = this.state;
            return (
                <div>
                    <h1>列表渲染-购物车</h1>
                    <table className="table table-striped">
                        <thead>
                        <tr>
                            <td>序号</td>
                            {listDef.map((t, i) => <td key={i}>{t.text}</td>)}
                            <td>操作</td>
                        </tr>
                        </thead>
                        <tbody>
                        {list.filter(i => i.visible).map((t, i) =>
                            <tr key={i}>
                                <td key="i">{i + 1}</td>
                                {listDef.slice(0, -1).map((d, i) => <td key={d.key}>{t[d.key]}</td>)}
                                <td key={t.key}><button onClick={() => this.addCount(i, -1)}>-</button>{t.count}<button onClick={() => this.addCount(i, 1)}>+</button></td>
                                <td key="btn"><button onClick={() => this.removeBook(i)}>移除</button></td>
                            </tr>
                        )}
                        </tbody>
                    </table>
                    {
                        list.length === 0 ? <h2>购物车为空~</h2> : <h2>总计 {list.map(t => t.count).reduce((a, b) => a + b)}本；总价{list.map(i => i.price * i.count).reduce((a, b) => a + b)}</h2>
                    }

                </div>
            )
        }
    }
    root.render(<App />);
</script>
</body>
</html>